# Modern.js

import { Badge } from '@theme';

[Modern.js](https://modernjs.dev/guides/get-started/introduction.html) is a progressive web development framework based on React. Internally at ByteDance, Modern.js supports the development of thousands of web applications.

The Module Federation team works closely with the Modern.js team and provides the `@module-federation/modern-js` plugin to help users better utilize Module Federation within Modern.js.

## Supports

- modern.js ^2.56.1
- Includes Server-Side Rendering (SSR)

We highly recommend referencing these applications, which showcases the best practices for integrating Modern.js with Module Federation:

* [Server-Side Rendering (SSR)](https://github.com/module-federation/core/tree/main/apps/modernjs-ssr)
* [Component-Level Data Fetch](https://github.com/module-federation/core/tree/main/apps/modern-component-data-fetch)

## Quick Start

### Installation

You can install the plugin using the following commands:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs
  command={{
    npm: 'npm add @module-federation/modern-js --save',
    yarn: 'yarn add @module-federation/modern-js --save',
    pnpm: 'pnpm add @module-federation/modern-js --save',
    bun: 'bun add @module-federation/modern-js --save',
  }}
/>

### Apply Plugin

Apply this plugin in the `plugins` section of `modern.config.ts`:

```ts title="modern.config.ts"
import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js';

export default defineConfig({
  dev: {
    port: 3005,
  },
  runtime: {
    router: true,
  },
  // moduleFederationPlugin is a plugin for modern.js that can make certain modifications to the build/runtime
  plugins: [appTools(), moduleFederationPlugin()],
});
```

Then, create the `module-federation.config.ts` file and add the required configuration:

```ts title="module-federation.config.ts"
import { createModuleFederationConfig } from '@module-federation/modern-js';
export default createModuleFederationConfig({
  name: 'host',
  remotes: {
    remote: 'remote@http://localhost:3006/mf-manifest.json',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});
```

## Server-Side Rendering (SSR)

:::info Note
For a better performance experience, Module Federation X Modern.js SSR only supports stream SSR.
:::

There is no difference in using Module Federation in SSR scenarios compared to CSR scenarios; developers can continue with their existing development practices.

## Component-Level Data Fetch

See [Data Fetching](../basic/data-fetch/index).

The Modern.js plugin re-exports `@module-federation/bridge-react` from `@module-federation/modern-js/react`, so you don't need to install it separately.

## API

`@module-federation/modern-js` re-exports `@module-federation/modern-js/runtime` from the `runtime` subpath. You can use `@module-federation/modern-js/runtime` to get the MF Runtime.Runtime。


### createRemoteComponent <Badge type="danger">Deprecated</Badge>

::: danger
This API has been deprecated. Please use [createLazyComponent](/practice/bridge/react-bridge/load-component.html#what-is-createlazycomponent) instead.
:::

#### Migration Guide

The parameters for `createRemoteComponent` and `createLazyComponent` are identical. The only difference is that the `createLazyComponent` API needs to be called through an instance after registering the plugin.

```diff
- import { createRemoteComponent } from '@module-federation/modern-js/runtime';
+ import { getInstance } from '@module-federation/modern-js/runtime';
+ import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';

const instance = getInstance();
// After registering the lazyLoadComponentPlugin, the instance will automatically add the createLazyComponent API
instance.registerPlugins([lazyLoadComponentPlugin()]);

- const LazyComponent = createRemoteComponent({
+ const LazyComponent = instance.createLazyComponent({
  loader: () => import('remote/Image'),
  loading: <div>loading...</div>,
  fallback: ({ error }) => {
    console.error(error)
    return <div>fallback</div>;
  },
});

const App: FC = () => {
  return <>
    <LazyComponent />
  </>;
};
export default App;
```

### createRemoteSSRComponent <Badge type="danger">Deprecated</Badge>

::: danger
This API has been deprecated. Please use [createLazyComponent](/practice/bridge/react-bridge/load-component.html#createlazycomponent-vs-createremoteappcomponent) instead.
:::

#### Migration Guide

Same as [createRemoteComponent#migration-guide](#migration-guide)

## Configuration

### ssr

- Type: `false`
- Required: No
- Default value: `undefined`

`@module-federation/modern-js` will automatically add SSR-related build presets based on `server.ssr` in the modern.js config.

If the current project only needs to load MF in CSR, you can set `ssr: false` to help with progressive migration.

```ts title='modern.config.ts'
import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  dev: {
    port: 3050,
  },
  runtime: {
    router: true,
  },
  server: {
    ssr: {
      mode: 'stream',
    },
  },
  plugins: [
    appTools(),
    moduleFederationPlugin({ ssr: false })
  ],
});
```

### fetchServerQuery

- Type: `Record<string, unknown>`
- Required: No
- Default: `undefined`

If a downgrade occurs, an HTTP request will be sent to the server. This configuration can be used to add query parameters to that request.
